<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增图片组')" />
    <th:block th:include="include :: summernote-css" />
    <style>
        .hidden-xs {
            display: inline !important;
        }
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-goods-add">



        <div class="form-group">
            <label class="col-sm-2 control-label">图片组：</label>
            <div class="col-sm-10">
                <input name="image_name" class="form-control" type="text" required>
            </div>
        </div>



        <div class="form-group">
            <label class="col-sm-2 control-label">主图: </label>
            <div class="col-sm-10">
                <input name="goodsLogo" id="imgUrl" class="form-control" type="hidden">
                <input id="fileinput-demo-1" name="file" type="file" multiple>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">图片组：</label>
            <div class="col-sm-10">
                <input name="storeGoodsImagesUrlsString" id="storeGoodsImagesUrls" class="form-control" type="text" >
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-fileinput-css" />
<th:block th:include="include :: bootstrap-fileinput-js" />
<th:block th:include="include :: summernote-js" />
<script type="text/javascript">
    var prefix = ctx + "shop/goods_image"
    var storeGoodsImagesUrls=[];
    $("#form-goods-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $('#storeGoodsImagesUrls').val(storeGoodsImagesUrls);
            $.operate.save(prefix + "/add", $('#form-goods-add').serialize());
        }
    }




    // $('.summernote').summernote({
    //     placeholder: '请输入内容',
    //     height : 192,
    //     lang : 'zh-CN',
    //     followingToolbar: false,
    //     callbacks: {
    //         onImageUpload: function (files) {
    //             sendFile(files[0], this);
    //         }
    //     }
    // });

    // 上传文件
    // function sendFile(file, obj) {
    //     var data = new FormData();
    //     data.append("file", file);
    //     $.ajax({
    //         type: "POST",
    //         url: ctx + "common/upload",
    //         data: data,
    //         cache: false,
    //         contentType: false,
    //         processData: false,
    //         dataType: 'json',
    //         success: function(result) {
    //             if (result.code == web_status.SUCCESS) {
    //                 $(obj).summernote('editor.insertImage', result.url, result.fileName);
    //             } else {
    //                 $.modal.alertError(result.msg);
    //             }
    //         },
    //         error: function(error) {
    //             $.modal.alertWarning("图片上传失败。");
    //         }
    //     });
    // }


    $(document).ready(function () {
        $("#fileinput-demo-1").fileinput({
            'theme': 'explorer-fas',
            'uploadUrl': '/common/upload',
            overwriteInitial: false,
            initialPreviewAsData: true,
            initialPreview: [
                //"/img/profile.jpg"
            ]
        });

        $("#fileinput-demo-1").on("fileuploaded", function (event, data, previewId, index) {
            console.log(data.response);
            if(data.response.code == 0){
                console.log("上传图片链接为 "+data.response.url)
                $('#imgUrl').val(data.response.url);
                storeGoodsImagesUrls.push(data.response.url)

            }
        });





    });
</script>

</body>
</html>